<template>
  <div>
    <el-container>
      <!-- 左侧功能栏 -->
      <el-aside width="180px" class="left_bar">
        <!-- 标题信息 -->
        <el-row>
          <el-col :span="3"></el-col>
          <el-col :span="21">质控管理</el-col>
        </el-row>
        <!-- 功能选择栏 -->
        <el-menu default-active="2" class="left_bar_menu">
          <el-menu-item class="left_bar_menu_item" index="1">
            <span slot="title">工作台</span>
          </el-menu-item>
          <el-menu-item class="left_bar_menu_item" index="2">
            <span slot="title">密码考核任务</span>
          </el-menu-item>
          <el-menu-item class="left_bar_menu_item" index="3">
            <span slot="title">考核评定</span>
          </el-menu-item>
          <el-menu-item class="left_bar_menu_item" index="4">
            <span slot="title">考核查询</span>
          </el-menu-item>
          <el-menu-item class="left_bar_menu_item" index="5">
            <span slot="title">记录查询</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="right_bar">
        <!-- 标题功能栏 -->
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <p>密码考核任务</p>
          </el-col>
          <el-row :gutter=20>
            <el-col :span="12">
              <el-button type="primary">新建任务</el-button>
            </el-col>
            <el-col :span="12">
              <el-button type="danger">回收站</el-button>
            </el-col>
          </el-row>
        </el-row>
        <!-- 搜索框 -->
        <el-row>
          <el-col :span="12">
            <el-input
              clearable
              placeholder="任务名称，任务号"
              suffix-icon="el-icon-search"
              v-model="input_words"
              v-on:keyup.enter.native="beginToSearch"
            ></el-input>
          </el-col>
        </el-row>
        <!-- 任务列表 -->
        <el-row class="task_list_fragment">
          <el-col :span="24">
            <el-menu class="task_menu" mode="horizontal" default-active="1">
              <el-menu-item index="1">全部</el-menu-item>
              <el-menu-item index="2">能力考核</el-menu-item>
              <el-menu-item index="3">省站考核</el-menu-item>
              <el-menu-item index="4">上岗考核</el-menu-item>
              <el-menu-item index="5">日常考核</el-menu-item>
              <el-menu-item index="6">其他</el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
        <!-- 分类显示按钮 -->
        <el-row :gutter=20 class="button_for_type" type="flex" justify="start">
          <el-col :span="2">
            <el-button type="info" plain v-on:click="total">全部</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="info" plain v-on:click="wait_for_down">待下达</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="info" plain v-on:click="wait_for_input">待填报</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="info" plain v-on:click="wait_for_debate">待评定</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="info" plain v-on:click="complete">已完成</el-button>
          </el-col>
        </el-row>
        <!-- 显示任务信息 -->
        <el-row>
          <el-col :span="24">
            <el-table ref="multipleTable" class="data_table" :data="tableData1" max-height="380">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="order" label="序号" width="140"></el-table-column>
              <el-table-column prop="task_order" label="任务编号" width="140"></el-table-column>
              <el-table-column prop="task_name" label="考核名称" width="100"></el-table-column>
              <el-table-column prop="task_aim" label="考核目的" width="140"></el-table-column>
              <el-table-column prop="task_number" label="考核进度" width="100"></el-table-column>
              <el-table-column prop="task_man" label="下达人" width="100"></el-table-column>
              <el-table-column prop="xia_date" label="下达时间" width="100"></el-table-column>
              <el-table-column prop="kao_date" label="考核时间" width="100"></el-table-column>
              <el-table-column prop="res" label="考核结果" width="100"></el-table-column>
              <el-table-column prop="kao_fang_an" label="考核方案" width="100"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      input_words: '',
      tableData1: [
        {
          order: 1,
          xia_date: '2018-1-10',
          task_order: 1,
          task_name: '考核一',
          task_aim: '哦哦哦哦哦哦，哦哦哦哦哦',
          task_number: '待下达',
          task_man: '黎朗',
          kao_date: '2019-1-10',
          res: '还未完成',
          kao_fang_an: '纯粹靠猜'
        },
        {
          order: 2,
          xia_date: '2018-1-11',
          task_order: 1,
          task_name: '考核二',
          task_aim: '哦哦哦哦哦哦，哦哦哦哦哦',
          task_number: '待评定',
          task_man: '黎朗',
          kao_date: '2019-1-12',
          res: '还未完成',
          kao_fang_an: '纯粹靠猜'
        },
        {
          order: 3,
          xia_date: '2018-1-11',
          task_order: 1,
          task_name: '考核三',
          task_aim: '哦哦哦哦哦哦，哦哦哦哦哦',
          task_number: '待填报',
          task_man: '黎朗',
          kao_date: '2019-1-14',
          res: '还未完成',
          kao_fang_an: '纯粹靠猜'
        },
        {
          order: 4,
          xia_date: '2018-1-12',
          task_order: 1,
          task_name: '考核四',
          task_aim: '哦哦哦哦哦哦，哦哦哦哦哦',
          task_number: '已完成',
          task_man: '黎朗',
          kao_date: '2019-1-15',
          res: '成功',
          kao_fang_an: '纯粹靠猜'
        },
        {
          order: 5,
          xia_date: '2018-1-14',
          task_order: 1,
          task_name: '考核五',
          task_aim: '哦哦哦哦哦哦，哦哦哦哦哦',
          task_number: '待评定',
          task_man: '黎朗',
          kao_date: '2019-1-16',
          res: '还未完成',
          kao_fang_an: '纯粹靠猜'
        }
      ],
      tableData3: [
        {
          order: 1,
          xia_date: '2018-1-10',
          task_order: 1,
          task_name: '考核一',
          task_aim: '哦哦哦哦哦哦，哦哦哦哦哦',
          task_number: '待下达',
          task_man: '黎朗',
          kao_date: '2019-1-10',
          res: '还未完成',
          kao_fang_an: '纯粹靠猜'
        },
        {
          order: 2,
          xia_date: '2018-1-11',
          task_order: 1,
          task_name: '考核二',
          task_aim: '哦哦哦哦哦哦，哦哦哦哦哦',
          task_number: '待评定',
          task_man: '黎朗',
          kao_date: '2019-1-12',
          res: '还未完成',
          kao_fang_an: '纯粹靠猜'
        },
        {
          order: 3,
          xia_date: '2018-1-11',
          task_order: 1,
          task_name: '考核三',
          task_aim: '哦哦哦哦哦哦，哦哦哦哦哦',
          task_number: '待填报',
          task_man: '黎朗',
          kao_date: '2019-1-14',
          res: '还未完成',
          kao_fang_an: '纯粹靠猜'
        },
        {
          order: 4,
          xia_date: '2018-1-12',
          task_order: 1,
          task_name: '考核四',
          task_aim: '哦哦哦哦哦哦，哦哦哦哦哦',
          task_number: '已完成',
          task_man: '黎朗',
          kao_date: '2019-1-15',
          res: '成功',
          kao_fang_an: '纯粹靠猜'
        },
        {
          order: 5,
          xia_date: '2018-1-14',
          task_order: 1,
          task_name: '考核五',
          task_aim: '哦哦哦哦哦哦，哦哦哦哦哦',
          task_number: '待评定',
          task_man: '黎朗',
          kao_date: '2019-1-16',
          res: '还未完成',
          kao_fang_an: '纯粹靠猜'
        }
      ]
    }
  },
  methods: {
    total: function () {
      this.tableData1 = []
      this.tableData3.forEach(element => {
        this.tableData1.push({
          order: element.order,
          xia_date: element.xia_date,
          task_order: element.task_order,
          task_name: element.task_name,
          task_aim: element.task_aim,
          task_number: element.task_number,
          task_man: element.task_man,
          kao_date: element.kao_date,
          res: element.res,
          kao_fang_an: element.kao_fang_an
        })
      })
    },
    wait_for_down: function () {
      this.tableData1 = []
      this.tableData3.forEach(element => {
        if (element.task_number == '待下达') {
          this.tableData1.push({
            order: element.order,
            xia_date: element.xia_date,
            task_order: element.task_order,
            task_name: element.task_name,
            task_aim: element.task_aim,
            task_number: element.task_number,
            task_man: element.task_man,
            kao_date: element.kao_date,
            res: element.res,
            kao_fang_an: element.kao_fang_an
          })
        }
      })
    },
    wait_for_input: function () {
      this.tableData1 = []
      this.tableData3.forEach(element => {
        if (element.task_number == '待填报') {
          this.tableData1.push({
            order: element.order,
            xia_date: element.xia_date,
            task_order: element.task_order,
            task_name: element.task_name,
            task_aim: element.task_aim,
            task_number: element.task_number,
            task_man: element.task_man,
            kao_date: element.kao_date,
            res: element.res,
            kao_fang_an: element.kao_fang_an
          })
        }
      })
    },
    wait_for_debate: function () {
      this.tableData1 = []
      this.tableData3.forEach(element => {
        if (element.task_number == '待评定') {
          this.tableData1.push({
            order: element.order,
            xia_date: element.xia_date,
            task_order: element.task_order,
            task_name: element.task_name,
            task_aim: element.task_aim,
            task_number: element.task_number,
            task_man: element.task_man,
            kao_date: element.kao_date,
            res: element.res,
            kao_fang_an: element.kao_fang_an
          })
        }
      })
    },
    complete: function () {
      this.tableData1 = []
      this.tableData3.forEach(element => {
        if (element.task_number == '已完成') {
          this.tableData1.push({
            order: element.order,
            xia_date: element.xia_date,
            task_order: element.task_order,
            task_name: element.task_name,
            task_aim: element.task_aim,
            task_number: element.task_number,
            task_man: element.task_man,
            kao_date: element.kao_date,
            res: element.res,
            kao_fang_an: element.kao_fang_an
          })
        }
      })
    },
    // 按下enter进行搜索
    beginToSearch: function () {
      alert(this.input_words)
    }
  }
}
</script>

<style>
.left_bar {
  height: 100%;
  text-align: center;
  background-color: transparent;
}
.left_bar_words {
  text-align: center;
  margin-top: 20px;
}
.left_bar_menu {
  margin: 20px;
}
.left_bar_menu_item {
  margin: 10px;
}

.right_bar {
}

.task_list_fragment {
  margin-top: 20px;
}
/* 信息列表 */
.task_menu{
  width: 100%;
}

.button_for_type {
  margin-top: 20px;
  margin-bottom: 20px;
}

.data_table {
  width: 100%;
}
</style>
